<template>
  <div>
    <div>
        <div>姓名:{{ p.name }}</div>
        <div>年龄:{{ p.age }}</div>
    </div>
    <div>
        <button @click="p.age++">更改</button>
    </div>
  </div>
</template>

<script lang='ts' setup>
import {reactive,watch,computed} from 'vue'
let p=reactive({
    name:'Giles',
    age:30
})
const p1=computed(()=>({...p}))
//使用watch来侦听reactive变量
watch(p1,(newval,oldval)=>{
    console.log(newval,oldval);
})
</script>

<style lang='scss' scoped>
</style>